<template>
  <div class="modal">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import {} from "vue";
</script>

<style lang="scss" scoped>
// .friendship {
//   width: 120px;
//   margin: 10px;
//   height: 120px;
//   background: #e9ecef;
//   color: #333;
//   box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.4), -7px -7px 12px rgba(255, 255, 255, 0.9);
// }

.modal {
  background: rgba(255, 255, 255, 0.55);
  color: #333;
  transition: 0.2s all;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.13);

  &:hover {
    box-shadow: 7px 7px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.01);
    background: rgba(255, 255, 255, 0.65);
  }
  &:active {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.1),
      -7px -7px 12px rgba(255, 255, 255, 0.4) inset, 7px 7px 12px rgba(0, 0, 0, 0.2) inset;
  }
}
</style>
